<template>
  <div class="distributors-baseInfo">
    <div class="baseInfo">
      <item-title title="基本信息" />
      <el-form
        class="form-detail"
        label-position="right"
        label-width="140px"
        inline
        :model="distributorInfo"
      >
        <el-form-item
          label="统一社会信用代码："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo.creditCode || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="联系人："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo.contactsName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="联系电话："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo.contactsPhone || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo.creatorName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 33.3333%"
        >
          <div>{{ dateFormat('yyyy-mm-dd HH:MM', distributorInfo.createdAt) || '无' }}</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="cert-info">
      <item-title title="资质信息" />
      <div class="certList">
        <files-upload-view
          :list="distributorInfo.qualifications"
          disabled
        />
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      distributorInfo: props.detail,
    })

    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

<style lang="scss" scoped>
.certList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>

